import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';

import { WeaMenu } from 'weaPortalPublic';

@inject('portalThemeStore')
@observer
class E9LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }

  newheight = () => {
    let asdh = $('.e9aside-container').height();
    $('.e9aside-container #menuScrollWrapper').css({ height: asdh });
    $('.wea-menu-vertical .ant-menu-vertical .ant-menu-submenu>.ant-menu-sub').css({ maxHeight: asdh, overflow: 'auto' });
  };

  componentDidMount() {
    window.addEventListener('resize', this.newheight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.newheight);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo, frontEndMenu, leftMenuObj, leftMenuMode, translatepage } = portalThemeStore;

    const { themeData = {} } = themeInfo;
    const { styleConfig = {} } = themeData;
    const { leftmenu = {} } = styleConfig;
    const fontSize = parseInt(leftmenu.titleFontSize || '12px');

    const { leftMenuSelected = {} } = leftMenuObj;
    const _frontEndMenu = toJS(frontEndMenu);
    const _leftMenuSelected = toJS(leftMenuSelected);
    const _selectedKey = _leftMenuSelected.id;

    return (
      <div className="e9aside-container" style={{ display: leftMenuMode == 'inline' ? 'block' : 'none' }}>
        <WeaMenu
          ecId={`${(this && this.props && this.props.ecId) || ''}_WeaMenu@hp6hi7`}
          mode="vertical"
          needSwitch={false}
          inlineWidth={197}
          verticalWidth={65}
          fontSize={fontSize}
          datas={_frontEndMenu}
          defaultSelectedKey={_selectedKey}
          onSelect={this.onSelect}
          translatepageheight={translatepage == '1' ? 30 : 0}
          translatepage={translatepage}
        />
      </div>
    );
  }

  onSelect(key, item) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLeftMenuSelectedChange(item);
    portalThemeStore.onLoadMain(item);
  }
}

export default E9LeftMenu;
